@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin './hero.ts';

@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

@font-face {
    font-family: 'JetBrains Mono', serif;
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../fonts/JetBrainsMono-Regular.woff2) format('woff2');
}

/*下面是 TailwindCSS 3.0 的设置方式，已废弃*/
/*@layer base {*/
/*    code:not([class]) {*/
/*        @apply font-['JetBrains_Mono'] rounded py-0.5 px-2 mx-1 dark:bg-[#282C34] dark:text-[#abb2bf] bg-[#F7F7F9] text-red-400 before:content-[''] after:content-[''];*/
/*    }*/
/*}*/

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
    transition: background-color .4s ease;
    scroll-behavior: smooth;
}

.fadeIn-container {
    animation: fadeIn .6s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.scaleIn-container {
    animation: scaleIn .6s forwards;
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        scale: 0.9;
        /*transform: skew(-3deg, -3deg);*/
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        scale: 1;
        /*transform: skew(0deg);*/
        filter: blur(0px);
    }
}

.blurIn-container {
    animation: blurIn .6s forwards ease-out;
}

@keyframes blurIn {
    0% {
        opacity: 0;
        scale: 0.95;
        filter: blur(40px);
    }

    100% {
        opacity: 1;
        scale: 1;
        filter: blur(0px);
    }
}

/* 设置文章中的小块代码的样式 */
code:not([class]) {
    border-radius: theme('borderRadius.DEFAULT');
    padding: theme('padding.1') theme('padding.2');
    margin-left: theme('margin.1');
    margin-right: theme('margin.1');
    background-color: theme('colors.zinc.100');
    color: theme('colors.red.400');

    /* 处理暗色模式 - 使用现代CSS方式 */
    @media (prefers-color-scheme: dark) {
        &.dark {
            background-color: theme('colors.gray.800');
            color: theme('colors.gray.300');
        }
    }

    /* 处理基于父元素的暗色模式 */
    .dark & {
        background-color: theme('colors.gray.800');
        color: theme('colors.gray.300');
    }

    /* 处理空 content */
    &::before,
    &::after {
        content: none;
    }
}